
    import {
      AmbientLight,
      AssetType,
      Camera,
      Color,
      DirectLight,
      FogMode,
      GLTFResource,
      Scene,
      ShadowType,
      Vector3,
      WebGLEngine,
    DHTML} from "@galacean/engine";
const {window,document,Blob,fetch,URL,Event,Event0} = DHTML
    //import { FreeControl } from "@galacean/engine-toolkit-controls";
    import * as dat from "dat.gui";
Page({
  onLoad() {

    
    async function main() {
      const engine = await WebGLEngine.create({ canvas: "canvas" });
      engine.canvas.resizeByClientSize();
    
      const scene = engine.sceneManager.activeScene;
    
      // Set background color to corn flower blue
      const cornFlowerBlue = new Color(130 / 255, 163 / 255, 255 / 255);
      scene.background.solidColor = cornFlowerBlue;
    
      // Set fog
      scene.fogMode = FogMode.ExponentialSquared;
      scene.fogDensity = 0.015;
      scene.fogEnd = 200;
      scene.fogColor = cornFlowerBlue;
    
      const rootEntity = scene.createRootEntity();
    
      // Create camera entity and components
      const cameraEntity = rootEntity.createChild("camera");
      cameraEntity.transform.setPosition(-6, 2, -22);
      cameraEntity.transform.rotate(new Vector3(0, -110, 0));
      cameraEntity.addComponent(Camera);
    //  cameraEntity.addComponent(FreeControl).floorMock = false;
    
      // Create light entity and component
      const lightEntity = rootEntity.createChild("light");
      lightEntity.transform.setPosition(0, 0.7, 0.5);
      lightEntity.transform.lookAt(new Vector3(0, 0, 0));
    
      // Enable light cast shadow
      const directLight = lightEntity.addComponent(DirectLight);
      directLight.shadowType = ShadowType.SoftLow;
    
      // Add ambient light
      const ambientLight = await engine.resourceManager.load({
        url: "https://gw.alipayobjects.com/os/bmw-prod/09904c03-0d23-4834-aa73-64e11e2287b0.bin",
        type: AssetType.Env,
      });
      scene.ambientLight = ambientLight;
    
      // Add model
      const glTFResource = await engine.resourceManager.load(
        "https://gw.alipayobjects.com/os/OasisHub/19748279-7b9b-4c17-abdf-2c84f93c54c8/oasis-file/1670226408346/low_poly_scene_forest_waterfall.gltf"
      );
      rootEntity.addChild(glTFResource.defaultSceneRoot);
    
      engine.run();
    
      // Add debug GUI for fog
      addDebugGUI(scene);
    }
    
    function addDebugGUI(scene){
      let fogStartItem;
      let fogEndItem;
      let fogDensityItem;
      const gui = new dat.GUI();
    
      let switchMode = (mode) => {
        switch (mode) {
          case FogMode.None:
            clearModeItems();
            break;
          case FogMode.Linear:
            clearModeItems();
            fogStartItem = gui.add(debugInfos, "fogStart", 0, 300).onChange((v) => {
              scene.fogStart = v;
            });
    
            fogEndItem = gui.add(debugInfos, "fogEnd", 0, 300).onChange((v) => {
              scene.fogStart = v;
            });
            break;
          case FogMode.Exponential:
          case FogMode.ExponentialSquared:
            clearModeItems();
            fogDensityItem = gui
              .add(debugInfos, "fogDensity", 0.01, 0.1)
              .onChange((v) => {
                scene.fogDensity = v;
              });
            break;
        }
        scene.fogMode = mode;
      };
    
      let clearModeItems = () => {
        if (fogStartItem) {
          fogStartItem.remove();
          fogStartItem = null;
        }
        if (fogEndItem) {
          fogEndItem.remove();
          fogEndItem = null;
        }
        if (fogDensityItem) {
          fogDensityItem.remove();
          fogDensityItem = null;
        }
      };
    
      const fogColor = scene.fogColor;
      const debugInfos = {
        fogMode: scene.fogMode,
        fogColor: [fogColor.r * 255, fogColor.g * 255, fogColor.b * 255],
        fogStart: scene.fogStart,
        fogEnd: scene.fogEnd,
        fogDensity: scene.fogDensity,
      };
    
      gui
        .add(debugInfos, "fogMode", {
          None: FogMode.None,
          Linear: FogMode.Linear,
          Exponential: FogMode.Exponential,
          ExponentialSquared: FogMode.ExponentialSquared,
        })
        .onChange((v) => {
          switchMode(parseInt(v));
        });
    
      gui.addColor(debugInfos, "fogColor").onChange((v) => {
        scene.fogColor.set(v[0] / 255, v[1] / 255, v[2] / 255, 1.0);
      });
    
      switchMode(scene.fogMode);
    }
    main();
  }
})